import React, { Component } from 'react';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
import styles from './Home.module.scss';
import WyTitle from '../wytitle/WyTitle';
import SearchInput from '../searchInput/SearchInput';
//引入轮播图组件
import { Carousel } from 'antd-mobile';
//引入本地图片
import mt from '../../img/mt.png';
import new1 from '../../img/new1.png';
import new2 from '../../img/new2.png';
import new3 from '../../img/new3.png';

//引入接口
import {getProTypeList, getProList} from '../../data/api';

class Home extends Component {
    state = {
        swiperFlag:false,//首页水平轮播图的标志变量
        vshopOneFlag:false,
        vshopTwoFlag:false,
        vshopThreeFlag:false,

        activeTab: "recommand", //默认激活的是推荐
        swiperList: [],//首页轮播图
        proTypeList: [],//商品列表的数据 图标 所有的数据
        vShopOne: [],//垂直滚动条1商品列表
        vShopTwo: [],//垂直滚动条1商品列表
        vShopThree: [],//垂直滚动条1商品列表
        hotList: [],//类目热销榜
        discount: [],//超值专区，员工精选

        // 服饰鞋包数据
        clothesList:[],
        lifeList:[],
    }
    async componentDidMount() {
        // let swiperList = await getHomeSwiper();
        let swiperList = await axios.get('/api/xhr/index.json?__timestamp=1606294415273&');
        // console.log(swiperList.data.data.data.focusList);

        let proTypeList = await getProTypeList();
        let vShopOne = await getProList({
            query: '食物',//食物
            pagenum: 1,
            pagesize: 5,
        });
        let vShopTwo = await getProList({
            query: '服装',//服装
            pagenum: 1,
            pagesize: 5,
        });
        let vShopThree = await getProList({
            query: '家电',//家电
            pagenum: 1,
            pagesize: 5,
        });
        // 服饰鞋包 选项卡
        let clothesList = await getProList({
            query: '服装',//服装
            pagenum: 1,
            pagesize: 60,
        });
        // 居家生活 选项卡
        let lifeList = await getProList({
            query: '家具',//服装
            pagenum: 1,
            pagesize: 60,
        });
        this.setState({
            swiperList: swiperList.data.data.data.focusList,
            proTypeList: proTypeList.message.splice(0, 10),//只要前10项数据
            vShopOne: vShopOne.message.goods,
            vShopTwo: vShopTwo.message.goods,
            vShopThree: vShopThree.message.goods,
            hotList: proTypeList.message.splice(0, 10),
            discount: proTypeList.message.splice(0, 2),

            clothesList:clothesList.message.goods,
            lifeList:lifeList.message.goods,
        })
    }
    //组件更新的生命周期
    componentDidUpdate(){
        if(this.state.swiperFlag === true){return;}
        if(this.state.swiperList.length !== 0){
            this.setState({
                swiperFlag:true
            })
        }
        if(this.state.vshopOneFlag === true){return;}
        if(this.state.vShopOne.length !== 0){
            this.setState({
                vshopOneFlag:true
            })
        }
        if(this.state.vshopTwoFlag === true){return;}
        if(this.state.vShopTwo.length !== 0){
            this.setState({
                vshopTwoFlag:true
            })
        }
        if(this.state.vshopThreeFlag === true){return;}
        if(this.state.vShopThree.length !== 0){
            this.setState({
                vshopThreeFlag:true
            })
        }

    }

    //点击切换tab选项
    handleTabClick = (e) => {
        this.setState({
            activeTab: e.target.dataset.current
        })
    }
    
    //点击返回头部
    handleBackTop = (params) => {
        let homeMain = document.getElementById('homeMain');
        let scrollTop = homeMain.scrollTop;
        let timeId = null;
        if(scrollTop >= 1014){
            timeId = setInterval(function(){
                homeMain.scrollTop -= 30;
                if(homeMain.scrollTop <= 0) clearInterval(timeId);
            },30);
        }
    }

    //点击跳转到登录页面
    gogoLogin = (props) => {
        this.props.history.push('personal');
    }

    //点击轮播图，跳转到商品详情页面
    goToGoodDetail = (goods_id) => {
        this.props.history.push('goodDetail/' + goods_id);
    }
    //点击各个分类图标去到分类页面
    gotoCategory = (props) => {
        this.props.history.push('category');
    }
    
    
    
    render() {
        return (
            <div>
                <div className={styles.homeTopBox}>
                    <div className={styles.homeTop}>
                        <WyTitle title='网易严选' left={false}></WyTitle>
                        <span className={styles.loginBtn} onClick={this.gogoLogin}>登录</span>
                    </div>
                    <SearchInput></SearchInput>
                    {/* tab选项卡 */}
                    <div className={styles.tabWrap} onClick={this.handleTabClick}>
                        <div data-current="recommand"
                            className={this.state.activeTab === "recommand" ? styles.active + " " + styles.tabItem : styles.tabItem}>推荐</div>
                        <div data-current="clothes"
                            className={this.state.activeTab === "clothes" ? styles.active + " " + styles.tabItem : styles.tabItem}>服饰鞋包</div>
                        <div data-current="life"
                            className={this.state.activeTab === "life" ? styles.active + " " + styles.tabItem : styles.tabItem}>居家生活</div>
                    </div>
                </div>
                {/* 主体 */}
                <div className={styles.homeMain} id="homeMain">
                    {/* 推荐 */}
                    {
                        this.state.activeTab === "recommand" ? <div>
                            {/* 轮播图组件的开始 */}
                            <div className={styles.yhHomeSwiper}>
                                <Carousel autoplay={this.state.swiperFlag} infinite 
                                dotStyle={{width:'20px',height:'3px'}}
                                dotActiveStyle={{width:'20px',height:'3px',background:'white'}}>
                                    {this.state.swiperList.map((val) => (
                                        <img
                                            key={val.id}
                                            src={val.picUrl}
                                            alt=""
                                            style={{ width: "100%", verticalAlign: "top" }}
                                            onLoad={() => {
                                                window.dispatchEvent(new Event("resize"));
                                                this.setState({ imgHeight: "auto" });
                                            }}
                                        />
                                    ))}
                                </Carousel>
                            </div>
                            {/* 轮播图组件的结束 */}
                            {/* 网易自营品牌 */}
                            <div className={styles.wyText}>
                                <div className={styles.textItem}>
                                    <i className={"iconfont icon-iconset0187 " + styles.icona}></i>
                                    <span>网易自营品牌</span>
                                </div>
                                <div className={styles.textItem}>
                                    <i className={"iconfont icon-iconset0187 " + styles.icona}></i>
                                    <span>30天无忧退货</span>
                                </div>
                                <div className={styles.textItem}>
                                    <i className={"iconfont icon-iconset0187 " + styles.icona}></i>
                                    <span>48小时快速退货</span>
                                </div>
                            </div>
                            {/* 首页商品展示 */}
                            <ul className={styles.typeList}>
                                {
                                    this.state.proTypeList.map((v, i) => {
                                        return <li key={v.cat_id} className={styles.typeItem} onClick={this.gotoCategory}>
                                            <img src={v.children[0].children[0].cat_icon} alt="" />
                                            <span>{v.cat_name}</span>
                                        </li>
                                    })
                                }
                            </ul>
                            {/* 垂直滚动的轮播图 */}
                            <div className={styles.redBox}>
                                <div className={styles.redTitle}><h1>新人首单0元购</h1><span className={styles.a}>下单返还100%金额</span><span className={styles.b}>GO&gt;&gt;</span></div>
                                <div className={styles.swiperBoxWrap}>
                                    <div className={styles.swiperBox}>
                                        {/* 轮播图1 */}
                                        <Carousel autoplay={this.state.vshopOneFlag} vertical={true} dots={false} infinite>
                                            {/* vertical={true}垂直显示 */}
                                            {this.state.vShopOne.map((val) => {
                                                return <div key={val.cat_id}>
                                                    <img
                                                        onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                                                        key={val.cat_id}
                                                        src={val.goods_small_logo}
                                                        alt=""
                                                        style={{ width: "100%", height: "100%", verticalAlign: "top" }}
                                                        onLoad={() => {
                                                            window.dispatchEvent(new Event("resize"));
                                                            this.setState({ imgHeight: "auto" });
                                                        }}
                                                    />
                                                </div>
                                            })}
                                        </Carousel>

                                    </div>
                                    <div className={styles.swiperBox}>
                                        {/* 轮播图2 */}
                                        <Carousel autoplay={this.state.vshopTwoFlag} vertical={true} dots={false} infinite>
                                            {/* vertical={true}垂直显示 */}
                                            {this.state.vShopTwo.map((val) => {
                                                return <div key={val.cat_id}>
                                                    <img
                                                        onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                                                        key={val.cat_id}
                                                        src={val.goods_small_logo}
                                                        alt=""
                                                        style={{ width: "100%", height: "100%", verticalAlign: "top" }}
                                                        onLoad={() => {
                                                            window.dispatchEvent(new Event("resize"));
                                                            this.setState({ imgHeight: "auto" });
                                                        }}
                                                    />
                                                    {/* <div className={styles.vText}><div className={styles.vSwiperL}>￥{val.goods_price}</div><div className={styles.vSwiperR}>0元</div></div> */}
                                                </div>
                                            })}
                                        </Carousel>
                                    </div>
                                    <div className={styles.swiperBox}>
                                        {/* 轮播图3 */}
                                        <Carousel autoplay={this.state.vshopThreeFlag} vertical={true} dots={false} infinite>
                                            {/* vertical={true}垂直显示 */}
                                            {this.state.vShopThree.map((val) => {
                                                return <div key={val.cat_id}>
                                                    <img
                                                        onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                                                        key={val.cat_id}
                                                        src={val.goods_small_logo}
                                                        alt=""
                                                        style={{ width: "100%", height: "100%", verticalAlign: "top" }}
                                                        onLoad={() => {
                                                            window.dispatchEvent(new Event("resize"));
                                                            this.setState({ imgHeight: "auto" });
                                                        }}
                                                    />
                                                    {/* <div className={styles.vText}><div className={styles.vSwiperL}>￥{val.goods_price}</div><div className={styles.vSwiperR}>0元</div></div> */}
                                                </div>
                                            })}
                                        </Carousel>
                                    </div>
                                </div>
                            </div>
                            <div className={styles.blackBox}>
                                <img src={mt} alt="" />
                                <span className={styles.bIntroduce}>1499元抢飞天茅台最强攻略</span>
                                <span className={styles.bBtn}>立即上车&nbsp;&nbsp;&gt;</span>
                            </div>
                            {/* 新人专享礼 */}
                            <div className={styles.newShare}>
                                <div className={styles.newTitle}>— 新人专享利 —</div>
                                <div className={styles.shareBox}>
                                    <div className={styles.sLeft}>
                                        <img src={new1} alt="" />
                                    </div>
                                    <div className={styles.sRight}>
                                        <img src={new2} alt="" />
                                        <img src={new3} alt="" />
                                    </div>
                                </div>
                            </div>
                            {/* 类目热销榜 */}
                            <div className={styles.hotWrap}>
                                <div className={styles.hotTitle}>类目热销榜</div>
                                <ul className={styles.hotList}>
                                    {
                                        this.state.hotList.map((v, i) => {
                                            return <li key={v.cat_id} className={styles.hotItem}>
                                                <div className={styles.hotText}>{v.cat_name}</div>
                                                <img src={v.children[0].children[0].cat_icon} alt="" />
                                            </li>
                                        })
                                    }
                                </ul>
                            </div>
                            {/* 超值专区  员工精选 */}
                            <ul className={styles.disList}>
                                {
                                    this.state.discount.map((v, i) => {
                                        return <li key={v.cat_id} className={styles.disItem}>
                                            {i === 0 ? <div className={styles.disTitle1}>超值专区<div className={styles.disTitle2}>低至9.9元</div></div> : <div className={styles.disTitle1}>员工精选<div className={styles.disTitle2}>天天内部价</div></div>}
                                            <img src={v.children[0].children[0].cat_icon} alt="" />
                                        </li>
                                    })
                                }
                            </ul>
                            {/* 底部 下载App 电脑版 */}
                            <div className={styles.footWrap}>
                                <div className={styles.down}>
                                    <span>下载APP</span>
                                    <span>电脑版</span>
                                </div>
                                <div className={styles.footT}>
                                    <p>网易公司版权所有&copy; 1997-2020</p>
                                    <p>食品经营许可证：JY13301080111719</p>
                                </div>
                                <div className={styles.backTop} onClick={this.handleBackTop}><div className={styles.backTopText}>&gt;</div></div>
                            </div>

                            {/* </div> */}

                        </div> : ""
                    }
                    {/* 服饰鞋包 */}
                    {
                        this.state.activeTab === "clothes" ? <div className={styles.tab2Main}>
                            {/* 轮播图组件的开始 */}
                            <div className={styles.yhHomeSwiper}>
                                <Carousel autoplay infinite>
                                    {/* vertical={true}垂直显示 */}
                                    {this.state.swiperList.map((val) => (
                                        <img
                                            onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                                            key={val.goods_id}
                                            src={val.image_src}
                                            alt=""
                                            style={{ width: "100%", verticalAlign: "top" }}
                                            onLoad={() => {
                                                window.dispatchEvent(new Event("resize"));
                                                this.setState({ imgHeight: "auto" });
                                            }}
                                        />
                                    ))}
                                </Carousel>
                            </div>
                            {/* 轮播图组件的结束 */}
                            <div className={styles.tab2Title}>热销爆款</div>
                            <div className={styles.tab2T}>人气好物放心购</div>
                            <ul className={styles.tab2List}>
                                {
                                    this.state.clothesList.map((v,i)=>{
                                        return <li className={styles.tab2Item} key={v.goods_id} onClick={this.goToGoodDetail.bind(this, v.goods_id)}>
                                            <img className={styles.tabItemImg} src={v.goods_small_logo} alt=""/>
                                            <div className={styles.tabItemTitle}>{v.goods_name}</div>
                                            <div className={styles.tabItemPrice}>￥ {v.goods_price}</div>
                                        </li>
                                    })
                                }
                            </ul>

                        </div> : ""
                    }
                    {/* 居家生活 */}
                    {
                        this.state.activeTab === "life" ?<div className={styles.tab2Main}>
                        {/* 轮播图组件的开始 */}
                        <div className={styles.yhHomeSwiper}>
                            <Carousel autoplay infinite>
                                {/* vertical={true}垂直显示 */}
                                {this.state.swiperList.map((val) => (
                                    <img
                                        onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                                        key={val.goods_id}
                                        src={val.image_src}
                                        alt=""
                                        style={{ width: "100%", verticalAlign: "top" }}
                                        onLoad={() => {
                                            window.dispatchEvent(new Event("resize"));
                                            this.setState({ imgHeight: "auto" });
                                        }}
                                    />
                                ))}
                            </Carousel>
                        </div>
                        {/* 轮播图组件的结束 */}
                        <div className={styles.tab2Title}>口碑好物</div>
                        <div className={styles.tab2T}>品质爆款</div>
                        <ul className={styles.tab2List}>
                            {
                                this.state.lifeList.map((v,i)=>{
                                    return <li className={styles.tab2Item} key={v.goods_id} onClick={this.goToGoodDetail.bind(this,v.goods_id)}>
                                        <img className={styles.tabItemImg} src={v.goods_small_logo} alt=""/>
                                        <div className={styles.tabItemTitle}>{v.goods_name}</div>
                                        <div className={styles.tabItemPrice}>￥ {v.goods_price}</div>
                                    </li>
                                })
                            }
                        </ul>

                    </div> : ""
                    }
                </div>
            </div>
        )
    }
}
export default withRouter(Home)
